<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-wrap">
        <TodoHeader :addToDo="addToDo"/>
        <TodoLIst :removeToDo="removeToDo" :todos="todos" />
        <todo-footer :todos="todos" :deleteCompleteTodos="deleteCompleteTodos" :selectAllTodos="selectAllTodos"/>
      </div>
    </div>
  </div>
</template>

<script>
import TodoHeader from "./components/TodoHeader";
import TodoLIst from "./components/TodoList";
import TodoFooter from "./components/TodoFooter";
export default {
  name: "App",
  components:{
    TodoFooter,
    TodoHeader,
    TodoLIst
  },
  data(){
    return{
      /*从localStorage读取*/
      todos:JSON.parse(window.localStorage.getItem('todos_key') || '[]')
    }
  },
  methods:{
    addToDo(item){
      this.todos.unshift(item);
    },
    removeToDo(index){
      this.todos.splice(index,1)
    },
    /*删除所有选中该的todo*/
    deleteCompleteTodos(){
      /*更新数组，过滤掉所有complete为false的值*/
      this.todos = this.todos.filter(todo => !todo.complete)
    },
    selectAllTodos(check){
      this.todos.forEach(todo => todo.complete = check)
    }
  },
  watch:{ /*监视*/
    todos:{
      deep:true,
      handler:function (value){
        /*将todos的最新值保存*/
        window.localStorage.setItem('todos_key',JSON.stringify(value))
      }
    }
  }
}
</script>

<style scoped>
/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
